<template>
<div class="cart">
  <nav-bar class="nav-bar">
    <div slot="center">购物车({{cartLength}})</div>
  </nav-bar>
  <cart-list></cart-list>
  <cart-bottom-bar></cart-bottom-bar>
</div>
</template>

<script>
//公共组件
import NavBar from "components/common/navbar/NavBar"; //头部

//模块组件
import CartList from "./childComps/CartList.vue"
import CartBottomBar from './childComps/CartBottomBar.vue';

//导入vuex的getters 转换为计算属性 vuex提供的方法
import { mapGetters } from 'vuex'



export default {
  name: "Shopcart",
  data() {
    return {

    }
  },
  components: {
    NavBar,
    CartList,
    CartBottomBar
  },
  computed: {//计算属性
    ...mapGetters(["cartLength"])//调用vuex里面的gitters
  }
}
</script>

<style scoped>
.cart {
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
  /* font-weight: 700; */
}
</style>
